<template>
	<view class="bill_list">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top title="账单"></tab-top>
		<!-- #endif -->
		<view class="content">
			<view class="con_head" @tap="showchange()">
				<view class="head_l">
					<view class="text1">{{year}}年{{month}}月</view>
					<view class="text2">
						<image src="/static/icon/down-999999.png" mode=""></image>
					</view>
				</view>
				<view class="head_r">
					<view class="text1" space="nbsp">收入 &yen;{{income}}</view>
					<view class="text2" space="nbsp">支出 &yen;{{expenditure}}</view>
				</view>
			</view>
			<view class="con_body">
				
				<view v-if="have == '0'" style="width: 100%;height: 30vh;" class="show">
					<image style="position:absolute;left: 0;right: 0;bottom: 0;margin: 0 auto; width:80upx;height: 80upx;" class="load_img" src="/static/icon/loading.png" mode=""></image>
				</view>
				<view class="list" v-else-if="have == '1'">
					<view class="item" @tap="openDetail(item)" v-for="(item, index) in list" :key="index">
						<view class="text1">{{item.handle_name}}</view>
						<view class="text2">{{item.create_time | filDate}}</view>
						<view class="text3 " :class="[item.change_type == 'add'?'pr_add':'pr_reduce']" space="nbsp">{{item.change_type == 'add'?'+':'-'}} {{item.amount}}</view>
					</view>
				</view>
				<view v-else-if="have ==  '-1'" class="show">
					<view class="show_null"><image src="/static/icon/bill-n.png" mode=""></image></view>
					<view class="title">暂无账单哦！</view>
				</view>
				
			</view>
		</view>
		<rangeDatePick 
			:show="isShow"
			@showchange="showchange"
			start="2018-01"
			:end="end"
			:value="value"
			@change="bindChange"
			@cancel="bindCancel">
		</rangeDatePick>
	</view>
</template>

<script>
	import moment from "moment";
	import rangeDatePick from '@/components/range-dtpicker/range-dtpicker.vue';
	let page = 1;

	export default {

		data() {
			let toDay = new Date(),
			year = moment(toDay).format('YYYY'),
			month = moment(toDay).format('MM'),
			value = [(year+'-'+month)],
			end = year+'-'+month;
			return {
				value:value,
				end:end,
				key: '',
				year:year,
				month:month,
				income:'0.00',//收入
				expenditure:'0.00',//支出
				list:[],
				have:'0',
				isShow:false,
			}
		},
		filters:{
			filDate(val){
				// moment( val*1000 ).format('YYYY-MM-DD hh:mm')
				return moment( val*1000 ).format('YYYY-MM-DD HH:mm');
			}
		},
		components: {
			rangeDatePick
		},
		methods: {
			openDetail(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/user/account/bill-details?id='+id,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			},
			/**
			 * getChangeList 获取账单列表
			 */
			getChangeList() {
				return new Promise((res) => {
					this.req({
						url: 'both/getChangeList',
						data: {
							id: this.isLogin().id,
							position: this.isLogin().type,
							year: this.year,
							month: this.month,
							page: page
						}
					}, (data) => {
						res(data.data)
					})
				});
			},
			/**
			 * getBalanceSum   获取账单明细总额 
			 */
			getBalanceSum() {
				return new Promise((res) => {
					this.req({
						url: 'both/getBalanceSum',
						data: {
							id: this.isLogin().id,
							position: this.isLogin().type,
							year: this.year,
							month: this.month,
							page: page
						}
					}, (data) => {
						res(data.data);
					})
				});
			},
			/**
			 * 页面初始加载
			 */
			async initialization() {
				
				console.log(this.value); 
				let resList = await this.getChangeList();
				if(resList.status == 1){
					this.have = '1';
					this.list = resList.data.data; 
				}else{
					this.have = '-1';
				}
				let resData = await this.getBalanceSum();
				this.income = resData.data.add;
				this.expenditure = resData.data.reduce;
				console.log(resList);
			},
			showchange(){ 
				this.isShow=!this.isShow; 
			},
			/**
			 * 确认事件
			 */
			bindChange(e){
				this.year = e.Y;
				this.month = e.M;
				this.initialization();
			},
			/**
			 * 取消
			 */
			bindCancel(e){
				console.log(e);
				console.log('取消');
			},
			/**
			 * 上拉加载
			 */
			async onReachBottom(){
				page++;
				let  res = await this.getChangeList();
				console.log(res);
				if(res.status == 1){
					this.list =  this.list.concat(res.data.data);
				}
				
			}
			
		},
		mounted() {

		},
		computed: {

		},
		onShow() {
			page = 1;
			this.initialization();
			// moment( val*1000 ).format('YYYY-MM-DD hh:mm')
		}
	}
</script>

<style scoped lang="scss">
	.load_img{
		-webkit-animation:myfirst 1.5s linear infinite;
	}
	@keyframes myfirst{
		from {transform:rotate(0deg)}
		to {transform:rotate(360deg)}
	}
	.show {
		position: relative;
		.show_null {
			margin-top: 190upx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 345upx;
				height: 310upx;
			}
		}
		.title {
			position: absolute;
			width: 100%;
			top: 310upx;
			left: 0;
			text-align: center;
			font-size: 32upx;
			color: #999999;
		}
	}
	.bill_list>.content {
		.con_head {
			height: 100upx;
			width: 100%;
			background-color: #f8f8f8;
			box-sizing: border-box;
			padding: 0 24upx;

			.head_l {
				float: left;
				margin-top: 34upx;

				.text1 {

					float: left;
					font-size: 28upx;
					color: #333333;
				}

				.text2 {
					margin-top: 10upx;
					margin-left: 10upx;
					float: left;
					width: 16upx;
					height: 16upx;

					image {
						width: 100%;
						height: 100%;
						float: left;
					}
				}
			}

			.head_r {
				float: right;
				width: 50%;
				color: #999999;
				text-align: right;
				font-size: 24upx;

				.text1 {
					margin-top: 20upx;
					line-height: 1;
					width: 100%;
				}

				.text2 {
					margin-top: 18upx;
					line-height: 1;
					width: 100%;
				}
			}
		}

		.con_body {
			width: 100%;
			box-sizing: border-box;
			padding: 0 24upx;

			.list {
				.item {
					width: 100%;
					height: 120upx;
					position: relative;

					.text1 {
						margin-top: 29upx;
						color: #333333;
						font-size: 28upx;
					}

					.text2 {
						font-size: 24upx;
						color: #999999;
						margin-top: 16upx;
					}

					.text3 {
						position: absolute;
						right: 0;
						top: 0;
						height: 100%;
						line-height: 120upx;
						font-size: 32upx;
					}

					.pr_add {
						color: #3595f9;
					}

					.pr_reduce {
						color: #333333;
					}
				}

				.item:before {
					position: absolute;
					left: 0;
					bottom: 0;
					background-color: #e5e5e5;
					width: 100%;
					height: 1upx;
					content: '';
					transform: scaleY(0.5);
				}
			}
		}
	}
</style>
